<template>
	<view style="width: 100%;background-color: white;">
		<view style="width: 100%;min-height: 100vh;overflow-y: auto;">
			<view style="width: 100%;height: auto;">
				<image :src="poster" style="width: 100%;" mode="widthFix"></image>
				<view style="width: 100%;height: 160rpx;display: flex;justify-content: space-between;padding: 0 40rpx;">

					<view style="display: grid;">
						<view style="font-size: 30rpx;font-weight: 600;margin-top: 20rpx;">{{info.name}}</view>
						<view style="display: flex;line-height: 30rpx;">
							<image :src="kanguoUrl" style="width: 30rpx;height: 30rpx;"></image>
							<view style="font-size: 24rpx;color: #9D9D9D;">{{info.click_num}}人看过</view>
						</view>
					</view>

					<view style="display: grid;text-align: center;">
						<view style="font-style: italic;color: #ea5550;font-size: 40rpx;margin-top: 20rpx;">
							￥{{info.price}}

						</view>
						<view
							style="font-style: italic;color: lightgray;text-decoration:line-through;font-size: 24rpx;margin-top: -10rpx;">
							价格￥{{info.original_price}}
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 0.3rpx;background-color: lightgray;"></view>
			</view>
			<view class="u-tabs-box sticky" :style="stickyStyle">
				<utabsswiper activeColor="#ea5550" ref="tabs" :list="list" :current="current" @change="change"
					:fontSize="24" :is-scroll="false" swiperWidth="750"></utabsswiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish"
				:style="{'height':detailHeight + 'px'}">
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 0">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,j) in detail1">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">
									<image :src="item" style="width: 100%;0;grid-area: stack;" mode="widthFix"
										@click="addTeacher(j)">
									</image>

									<!-- 了解咨询当前约拍市场 -->
									<view v-if="j == 2"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 30rpx;">
										<image :src="btn_01" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 了解更多变现案例 -->
									<view v-if="j == 3"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 30rpx;">
										<image :src="btn_02" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 点击咨询自己水平是否可行 -->
									<view v-if="j == 5"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 60rpx;">
										<image :src="btn_03" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图1 -->
									<view v-if="j == 7"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('1')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex1" @change="onSwiperChange1" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider1"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;height: 730rpx;" mode="">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('1')">
										</image>
									</view>
									<!-- 了解更多变现案例 -->
									<view v-if="j == 7"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 40rpx;">
										<image :src="btn_02" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 咨询诊断你的问题 -->
									<view v-if="j == 8"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 0rpx;">
										<image :src="btn_04" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图2 -->
									<view v-if="j == 10"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('2')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex2" @change="onSwiperChange2" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider2"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('2')">
										</image>
									</view>
									<!-- 了解更多变现案例 -->
									<view v-if="j == 10"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 40rpx;">
										<image :src="btn_02" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图3 -->
									<view v-if="j == 12"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('3')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex3" @change="onSwiperChange3" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider3"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;height: 750rpx;" mode="">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('3')">
										</image>
									</view>
									<!-- 了解爹妈是1v1陪跑 -->
									<view v-if="j == 12"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 60rpx;">
										<image :src="btn_05" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 了解AI工具 -->
									<view v-if="j == 13"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 30rpx;">
										<image :src="btn_06" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 了解更多公域+私域教学 -->
									<view v-if="j == 14"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 60rpx;">
										<image :src="btn_07" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图4 -->
									<view v-if="j == 15"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 150rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('4')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex4" @change="onSwiperChange4" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider4"
												style="width: 100%;height: 100%;;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;height: 850rpx;" mode="">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('4')">
										</image>
									</view>
									<!-- 了解内部分享会 -->
									<view v-if="j == 15"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 40rpx;">
										<image :src="btn_10" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图5 -->
									<view v-if="j == 16"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 220rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('5')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex5" @change="onSwiperChange5" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider5"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('5')">
										</image>
									</view>
									<!-- 了解班级群 -->
									<view v-if="j == 16"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 140rpx;">
										<image :src="btn_11" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图6 -->
									<view v-if="j == 18"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('6')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex6" @change="onSwiperChange6" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider6"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;height: 800rpx;" mode="">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('6')">
										</image>
									</view>
									<!-- 了解更多变现资源 -->
									<view v-if="j == 18"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 60rpx;">
										<image :src="btn_12" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图7 -->
									<view v-if="j == 20"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('7')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex7" @change="onSwiperChange7" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider7"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;height: 950rpx;" mode="">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('7')">
										</image>
									</view>
									<!-- 咨询领取详细课程大纲 -->
									<view v-if="j == 20"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 60rpx;">
										<image :src="btn_13" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图8 -->
									<view v-if="j == 22"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('8')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex8" @change="onSwiperChange8" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider8"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('8')">
										</image>
									</view>
									<!-- 咨询自己是否合适 -->
									<view v-if="j == 23"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 40rpx;">
										<image :src="btn_14" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 轮播图9 -->
									<view v-if="j == 25"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('9')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex9" @change="onSwiperChange9" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider9"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('9')">
										</image>
									</view>
									<!-- 轮播图10 -->
									<view v-if="j == 27"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix"
											@click="jianjian('10')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex10" @change="onSwiperChange10" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider10"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;" mode="widthFix">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix"
											@click="jiajia('10')">
										</image>
									</view>
									<!-- 了解更多蚂蚁账号 -->
									<view v-if="j == detail1.length - 3"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 30rpx;">
										<image :src="btn_15" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
									<!-- 与老师交流 -->
									<view v-if="j == detail1.length - 2"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 10rpx;">
										<image :src="btn_16" class="popBtn" mode="widthFix" @click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 1">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,j) in detail2">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">
									<image :src="item" style="width: 100%;0;grid-area: stack;" mode="widthFix">
									</image>
									<!-- 了解更多变现案例 -->
									<view v-if="j == 0"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 30rpx;">
										<image :src="btn_02" style="width: 360rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 2">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,j) in detail3">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">
									<image :src="item" style="width: 100%;0;grid-area: stack;" mode="widthFix">
									</image>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="height: 100%;" v-show="swiperCurrent == 3">
					<view style="width: 100%;" class="swiper-item_child">

						<view v-for="(item,j) in detail4">
							<view class="">
								<view style="display: grid;grid-template-areas: 'stack'; ">
									<image :src="item" style="width: 100%;0;grid-area: stack;" mode="widthFix">
									</image>
									<!-- 轮播图3 -->
									<view v-if="j == 1"
										style="display: flex;justify-content: space-between;align-items: center;width:100%;grid-area: stack;margin-top: 0rpx;">
										<image :src="leftIcon" class="leftArrow" mode="widthFix" @click="jianjian('3')">
										</image>
										<swiper class="swiperslider" :indicator-dots="indicatorDots"
											:current="currentIndex3" @change="onSwiperChange3" :autoplay="autoplay"
											:interval="interval" :duration="duration">
											<swiper-item v-for="(item,index) in slider3"
												style="width: 100%;height: 100%;" @touchmove.stop="stopTouchMove">
												<image :src="item" style="width: 100%;height: 750rpx;" mode="">
												</image>
											</swiper-item>
										</swiper>
										<image :src="rightIcon" class="rightArrow" mode="widthFix" @click="jiajia('3')">
										</image>
									</view>
									<!-- 了解爹妈是1v1陪跑 -->
									<view v-if="j == 1"
										style="width: 100%;text-align: center;grid-area: stack;align-self: end;margin-bottom: 60rpx;">
										<image :src="btn_05" style="width: 320rpx;" mode="widthFix" @click="showPop()">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view :class=" platform == 'ios' ? 'bottomView_ios' : 'bottomView'">
			<view class="zxls" @click="toZxls('1')" style="border-right: 1rpx solid lightgray;">
				<view class="bottomImg">
					<view>
						<image :src="zxlsUrl">
						</image>
					</view>
					<view>咨询老师</view>
				</view>
			</view>
			<view class="zxls" @click="toZxls('2')" style="border-right: 1rpx solid lightgray;">
				<view class="bottomImg">
					<view>
						<image :src="dagangUrl">
						</image>
					</view>
					<view>领取大纲</view>
				</view>
			</view>
			<view class="zxls" @click="toZxls('3')">
				<view class="bottomImg">
					<view>
						<image :src="youhuiUrl">
						</image>
					</view>
					<view>领取优惠</view>
				</view>
			</view>
		</view>
		<bxPop ref="vipPop"></bxPop>
		<videoPlayer ref="videoPlayer">
		</videoPlayer>
	</view>
</template>
<script>
	const app = getApp();
	const comUrl =
		"https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/%E5%8F%98%E7%8E%B0%E8%AF%BE/";

	const comIconUrl = "https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/";
	import {
		addClickRecord,
		getCourseTypeDetail,
		addCourseLearnRecord,
		getWechatURLLink,
	} from '@/api/home.js';

	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";

	import animationType from '@/utils/animationType.js'
	import utabsswiper from '../backup/h-tabs-swiper.vue';
	import bxPop from '../backup/bxPop.vue';
	import videoPlayer from '../backup/videoPlayer.vue';

	export default {
		components: {
			utabsswiper,
			bxPop,
			videoPlayer
		},
		props: {
			userId: {
				type: String,
				required: true
			},
			token: {
				type: String,
				required: true
			},
			couId: {
				type: String,
				required: true
			},
		},
		data() {
			return {
				currentIndex1: 0,
				currentIndex2: 0,
				currentIndex3: 0,
				currentIndex4: 0,
				currentIndex5: 0,
				currentIndex6: 0,
				currentIndex7: 0,
				currentIndex8: 0,
				currentIndex9: 0,
				currentIndex10: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				kanguoUrl: comIconUrl + 'kanguo.png',
				screenWidth: uni.getSystemInfoSync().screenWidth,
				maxHeight1: 0,
				maxHeight2: 0,
				maxHeight3: 0,
				maxHeight4: 0,
				maxHeight5: 0,
				detailHeight: 0,
				dagang: [],
				detail: [],
				detail1: [comUrl + 'bx_01.jpg', comUrl + 'bx_02.jpg', comUrl + 'bx_03.jpg', comUrl + 'bx_04_01.jpg',
					comUrl + 'bx_04_02.jpg', comUrl +
					'bx_05.jpg', comUrl + 'bx_06_03.jpg', comUrl + 'bx_06_04.jpg', comUrl + 'bx_07.jpg', comUrl +
					'bx_08_04.jpg', comUrl +
					'bx_08_05.jpg', comUrl +
					'bx_09_01.jpg', comUrl +
					'bx_09_02.jpg', comUrl + 'bx_10_01.png', comUrl + 'bx_10_02.png', comUrl + 'bx_11.jpg', comUrl +
					'bx_12.jpg', comUrl +
					'13_01_05.jpg', comUrl +
					'13_01_06.jpg', comUrl + 'bx_14_03.jpg', comUrl + 'bx_14_04.jpg', comUrl + 'bx_15.jpg', comUrl +
					'bx_16_01.jpg', comUrl +
					'bx_16_02.jpg', comUrl +
					'bx_17_03.jpg', comUrl +
					'bx_17_04.jpg', comUrl +
					'bx_17_05.jpg', comUrl +
					'bx_17_06.jpg',
					comUrl + 'bx_18.jpg', comUrl + 'bx_19.jpg', comUrl + 'bx_20_02.jpg', comUrl +
					'btn_17.png',
				],
				detail2: [comUrl + 'bx_04_01.jpg'],
				detail3: [comUrl + 'bx_15.jpg'],
				detail4: [comUrl + 'bx_09_01.jpg', comUrl + 'bx_09_02.jpg'],
				detail5: [],
				slider1: [comUrl + 'sl_01_01.jpg', comUrl + 'sl_01_02.jpg'],
				slider2: [comUrl + 'sl_02_01.jpg', comUrl + 'sl_02_02.jpg'],
				slider3: [comUrl + 'sl_03_01.jpg', comUrl + 'sl_03_02.jpg', comUrl + 'sl_03_03.jpg', comUrl +
					'sl_03_04.jpg', comUrl + 'sl_03_05.jpg', comUrl + 'sl_03_06.jpg', comUrl + 'sl_03_07.jpg', comUrl +
					'sl_03_08.jpg', comUrl + 'sl_03_09.jpg', comUrl + 'sl_03_10.jpg', comUrl + 'sl_03_11.jpg', comUrl +
					'sl_03_12.jpg'
				],
				slider4: [comUrl + 'sl_04_01.jpg', comUrl + 'sl_04_02.jpg', comUrl + 'sl_04_03.jpg', comUrl +
					'sl_04_04.jpg'
				],
				slider5: [comUrl + 'sl_05_01.jpg', comUrl + 'sl_05_02.jpg'],
				slider6: [comUrl + 'sl_06_01.jpg'],
				slider7: [comUrl + 'sl_07_01.jpg', comUrl + 'sl_07_02.jpg', comUrl + 'sl_07_03.jpg'],
				slider8: [comUrl + 'sl_08_01.jpg', comUrl + 'sl_08_02.jpg'],
				slider9: [comUrl + 'sl_09_01.jpg', comUrl + 'sl_09_02.jpg', comUrl + 'sl_09_03.jpg', comUrl +
					'sl_09_04.jpg', comUrl + 'sl_09_05.jpg'
				],
				slider10: [comUrl + 'sl_09_06.jpg', comUrl + 'sl_09_07.jpg', comUrl +
					'sl_09_08.jpg', comUrl + 'sl_09_09.jpg', comUrl + 'sl_09_10.jpg', comUrl + 'sl_09_11.jpg', comUrl +
					'sl_09_12.jpg'
				],
				btn_01: comUrl + 'btn_01.png',
				btn_02: comUrl + 'btn_02.png',
				btn_03: comUrl + 'btn_03.png',
				btn_04: comUrl + 'btn_04.png',
				btn_05: comUrl + 'btn_05.png',
				btn_06: comUrl + 'btn_06.png',
				btn_07: comUrl + 'btn_07.png',
				btn_08: comUrl + 'btn_08.png',
				btn_10: comUrl + 'btn_10.png',
				btn_11: comUrl + 'btn_11.png',
				btn_12: comUrl + 'btn_12.png',
				btn_13: comUrl + 'btn_13.png',
				btn_14: comUrl + 'btn_14.png',
				btn_15: comUrl + 'btn_15.png',
				btn_16: comUrl + 'btn_16.png',
				leftIcon: comUrl + "lefticon.png",
				rightIcon: comUrl + "righticon.png",
				zxlsUrl: comIconUrl + 'wechat.png',
				dagangUrl: comIconUrl + 'dagang.png',
				youhuiUrl: comIconUrl + 'youhui.png',
				poster: "",
				info: {},
				current: 0,
				swiperCurrent: 0,
				list: [{
					name: '简介'
				}, {
					name: '学员变现晒单'
				}, {
					name: '学员评价'
				}, {
					name: '爹妈式辅导'
				}],
				platform: uni.getSystemInfoSync().platform,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				allVideoId: [],
				scrollDistabce: 0,
				scrollPercent: 0,
				timer: 0, // 计时器的时间
				intervalId: null, // 定时器的 ID
				stickyStyle: '',
			}
		},
		mounted: function() {
			let that = this;
			console.log('22计时器:', that.userId);
			that.getCourseTypeDetail();
			that.calcHeight();

			if (that.intervalId) return; // 防止重复启动
			that.intervalId = setInterval(() => {
				that.timer++;
				//console.log('计时器:', this.timer);
			}, 1000);

			window.viewCourseRecord = (param) => {
				console.log('hahaha');
				that.viewMyCourseRecord(param);
			};
			window.aabbcc = function() {
				console.log('aabbcc-Hello');
			};

			uni.$on('pageScroll', (scrollTop) => {
				if (scrollTop > 300) { // 滚动超过300时吸顶
					that.stickyStyle = 'position: fixed; top: 0; width: 100%; z-index: 999;';
				} else {
					that.stickyStyle = '';
				}

				if (scrollTop > that.scrollDistabce) {
					that.scrollDistabce = scrollTop;
					//that.scrollPercent = ((that.scrollDistabce / that.maxHeight1) * 100 * 1000).toFixed(2)
					that.scrollPercent = ((that.scrollDistabce / that.maxHeight1) * 100).toFixed(0);
				}
			});
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			viewMyCourseRecord(pp) {
				console.log('viewMyCourseRecord调用成功');
				let that = this;

				let p = {};

				if (that.scrollPercent < 1) {
					that.scrollPercent = 1;
				}
				if (that.scrollPercent > 100) {
					that.scrollPercent = 100;
				}
				p.jindu = that.scrollPercent;
				p.times = that.timer;
				p.userId = that.userId;
				p.token = that.token;
				p.secId = '0';
				p.couId = that.couId;
				addCourseLearnRecord(p).then(res => {
					if (res.code == 0) {

					}
				})
			},
			addTeacher(l) { //最后一张图 抢购
				let that = this;
				let platform = uni.getSystemInfoSync().platform; //手机类型
				if (l == that.detail1.length - 1) {
					if (platform == 'ios') {
						window.webkit.messageHandlers.goWechat.postMessage("");
					}
					if (platform == 'android') {
						window.location.href = 'goWechat';
					}
				}
			},
			stopTouchMove() {
				return false;
			},
			jianjian(f) {
				let that = this;
				if (f == '1') {
					if (that.currentIndex1 > 0) {
						that.currentIndex1--;
					}
				} else if (f == '2') {
					if (that.currentIndex2 > 0) {
						that.currentIndex2--;
					}
				} else if (f == '3') {
					if (that.currentIndex3 > 0) {
						that.currentIndex3--;
					}
				} else if (f == '4') {
					if (that.currentIndex4 > 0) {
						that.currentIndex4--;
					}
				} else if (f == '5') {
					if (that.currentIndex5 > 0) {
						that.currentIndex5--;
					}
				} else if (f == '6') {
					if (that.currentIndex6 > 0) {
						that.currentIndex6--;
					}
				} else if (f == '7') {
					if (that.currentIndex7 > 0) {
						that.currentIndex7--;
					}
				} else if (f == '8') {
					if (that.currentIndex8 > 0) {
						that.currentIndex8--;
					}
				} else if (f == '9') {
					if (that.currentIndex9 > 0) {
						that.currentIndex9--;
					}
				} else if (f == '10') {
					if (that.currentIndex10 > 0) {
						that.currentIndex10--;
					}
				}
			},
			jiajia(f) {
				let that = this;
				if (f == '1') {
					if (that.currentIndex1 < that.slider1.length - 1) {
						that.currentIndex1++;
					}
				} else if (f == '2') {
					if (that.currentIndex2 < that.slider2.length - 1) {
						that.currentIndex2++;
					}
				} else if (f == '3') {
					if (that.currentIndex3 < that.slider3.length - 1) {
						that.currentIndex3++;
					}
				} else if (f == '4') {
					if (that.currentIndex4 < that.slider4.length - 1) {
						that.currentIndex4++;
					}
				} else if (f == '5') {
					if (that.currentIndex5 < that.slider5.length - 1) {
						that.currentIndex5++;
					}
				} else if (f == '6') {
					if (that.currentIndex6 < that.slider6.length - 1) {
						that.currentIndex6++;
					}
				} else if (f == '7') {
					if (that.currentIndex7 < that.slider7.length - 1) {
						that.currentIndex7++;
					}
				} else if (f == '8') {
					if (that.currentIndex8 < that.slider8.length - 1) {
						that.currentIndex8++;
					}
				} else if (f == '9') {
					if (that.currentIndex9 < that.slider9.length - 1) {
						that.currentIndex9++;
					}
				} else if (f == '10') {
					if (that.currentIndex10 < that.slider10.length - 1) {
						that.currentIndex10++;
					}
				}
			},
			onSwiperChange1(e) {
				this.currentIndex1 = e.detail.current;
			},
			onSwiperChange2(e) {
				this.currentIndex2 = e.detail.current;
			},
			onSwiperChange3(e) {
				this.currentIndex3 = e.detail.current;
			},
			onSwiperChange4(e) {
				this.currentIndex4 = e.detail.current;
			},
			onSwiperChange5(e) {
				this.currentIndex5 = e.detail.current;
			},
			onSwiperChange6(e) {
				this.currentIndex6 = e.detail.current;
			},
			onSwiperChange7(e) {
				this.currentIndex7 = e.detail.current;
			},
			onSwiperChange8(e) {
				this.currentIndex8 = e.detail.current;
			},
			onSwiperChange9(e) {
				this.currentIndex9 = e.detail.current;
			},
			onSwiperChange10(e) {
				this.currentIndex10 = e.detail.current;
			},
			showPop() {
				let that = this;
				that.$refs.vipPop.showPop();
			},
			toZxls(i) {
				let that = this;
				that.addClick();

				let platform = uni.getSystemInfoSync().platform; //手机类型

				if (platform == 'ios') {
					window.webkit.messageHandlers.goWechat.postMessage("");
				}
				if (platform == 'android') {
					window.location.href = 'goWechat';
				}
			},
			addClick() {
				let that = this;
				let pp = {};
				let type = '人像实战班-咨询老师';
				if (type != '') {
					pp.userId = that.userId;
					pp.token = that.token;
					pp.platform = that.platform == 'ios' ? '苹果' : '安卓';
					pp.type = type;
					addClickRecord(pp).then(res => {

					})
				}
			},
			getCourseTypeDetail() {
				let that = this;
				let pp = {};
				pp.userId = that.userId;
				pp.token = that.token;
				pp.couId = that.couId;
				getCourseTypeDetail(pp).then(res => {
					if (res.code == 0) {
						that.info = res.data.info;
						that.poster = res.data.poster;
					}
				})
			},
			change(current) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;
			},
			transition({
				detail: {
					dx
				}
			}) {
				let that = this;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;

				//重新计算高速
				if (current == 0) {
					that.detailHeight = that.maxHeight1;
				} else if (current == 1) {
					that.detailHeight = that.maxHeight2;
				} else if (current == 2) {
					that.detailHeight = that.maxHeight3;
				} else if (current == 3) {
					that.detailHeight = that.maxHeight4;
				} else if (current == 4) {
					that.detailHeight = that.maxHeight5;
				}
			},
			videoErrorCallback: function(e) {
				//e.target.errMsg
			},
			calcHeight() {
				let that = this;
				that.detailHeight = 100;
				that.maxHeight1 = 100;
				that.maxHeight2 = 100;
				that.maxHeight3 = 100;
				that.maxHeight4 = 100;
				that.maxHeight5 = 100;
				for (let i = 0; i < that.detail1.length; i++) {
					uni.getImageInfo({
						src: that.detail1[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight1 = that.maxHeight1 + hhh;
							that.detailHeight = that.detailHeight + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.detail2.length; i++) {
					uni.getImageInfo({
						src: that.detail2[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight2 = that.maxHeight2 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.detail3.length; i++) {
					uni.getImageInfo({
						src: that.detail3[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight3 = that.maxHeight3 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.detail4.length; i++) {
					uni.getImageInfo({
						src: that.detail4[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight4 = that.maxHeight4 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
				for (let i = 0; i < that.detail5.length; i++) {
					uni.getImageInfo({
						src: that.detail5[i], // 图片路径
						success: (res) => {
							let w = res.width;
							let h = res.height;
							let hhh = that.screenWidth * h / w;
							that.maxHeight5 = that.maxHeight5 + hhh;
						},
						fail: (err) => {
							console.error('获取图片信息失败:', err);
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.popBtn {
		width: 280rpx;
	}

	.swiperslider {
		width: 70%;
		height: 100%;
	}

	.leftArrow {
		width: 50rpx;
		height: 50rpx;
		margin-left: 40rpx;
	}

	.rightArrow {
		width: 50rpx;
		height: 50rpx;
		margin-right: 44rpx;
	}

	// /deep/uni-swiper-item {
	// 	display: grid !important;
	// 	place-items: center !important;
	// }

	/deep/uni-swiper .uni-swiper-dots-horizontal {
		bottom: 40px !important;
	}

	/deep/uni-swiper .uni-swiper-dot-active {
		background: #ea5550;
	}

	/deep/uni-swiper .uni-swiper-dot {
		width: 6px;
		height: 6px;
	}

	.uni-margin-wrap {
		width: 100%;
		// height: 1000rpx !important;
		height: auto;
	}

	.bottomImg {
		display: grid;
		margin-top: 20rpx;
		font-size: 24rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.canScroll {
		overflow-y: scroll;
	}

	.canntScroll {
		overflow-y: hidden;
	}

	.bottomView_ios {
		width: 100%;
		height: 140rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: white;
		display: flex;
		border-top: 1rpx solid lightgray;
	}

	.bottomView {
		width: 100%;
		height: 140rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: white;
		display: flex;
		border-top: 1rpx solid lightgray;
	}

	.zxls {
		// margin-top: 10rpx;
		width: 33.33%;
		height: 100%;
		text-align: center;
	}

	.swiper-box {
		// flex: 1;
		height: 100%;
		//margin: 30rpx;
		// padding: 30rpx;
	}

	.sticky-box {
		display: flex;
		position: -webkit-sticky;
		position: sticky;

		z-index: 9999;
		flex-direction: row;
		margin: 0px;
		background: #f5f5f5;
	}
</style>